<template>
    <div>
        <div class="header">
            <div class="search">
                <div class="input">
                    <i class="icon-search"></i>
                    <input
                        confirm-type="search"
                        @confirm="onRefresh"
                        v-model="keyword"
                        placeholder="输入关键词搜索" placeholder-class="placeholder">
                    <div class="clear" @click="clearKeyword">
                        <i v-if="keyword" class="icon-close fs24"></i>
                    </div>
                </div>
            </div>
            <div class="fast_date_picker">
                <pub-fast-date-picker ref="fastDatePicker" v-model="searchTime" @change="fastDateChange" types="00,04,05"></pub-fast-date-picker>
            </div>
        </div>
        <div class="list">
            <div class="item" v-for="(item, index) in list" :key="index">
                <div class="img">
                    <image :src="item.headImg" mode="" />
                </div>
                <div class="detail">
                    <p>您邀请的：<em>{{item.userName}}</em>注册成功</p>
                    <span>{{item.createTime}}</span>
                    <span v-if="item.vip == '01'" style="color: #ff6600">已开通会员</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getUsersInviteList, getUserInviteTotal } from '@/request/user'
export default {
    data() {
        return {
            searchTime: [],
            isVip: '',
            keyword: '',
            list: [],
            scroll: {
                page: 1,
                size: 30,
                loading: false,
                max: false,
                noData: false,
            },
        }
    },
    onReachBottom() {
        this.onInfinite()
    },
    onLoad({ limitDay, isVip }) {
        this.isVip = isVip || '';
        this.$nextTick(() => {
            if(limitDay) {
                if(limitDay == 'all') {
                    this.searchTime = []
                } else {
                    this.searchTime = this.$refs.fastDatePicker.getFormatDate(limitDay)
                }
            }
            this.onRefresh()
        })
    },
    methods: {
        clearKeyword() {
            this.keyword = '';
            this.onRefresh()
        },
        getList(complete) {
            getUsersInviteList({
                keyWord: this.keyWord,
                isVip: this.isVip || void 0, 
                startTime: this.searchTime[0] ? this.searchTime[0] + ' 00:00:00' : void 0,
                endTime: this.searchTime[1] ? this.searchTime[1] + ' 23:59:59' : void 0,
                pageIndex: this.scroll.page,
                pageSize: this.scroll.size,
            }, { complete }).then(res => {
                this.list = this.scroll.page == 1 ? res.data.list : this.list.concat(res.data.list)
                this.scroll.max = this.list.length >= res.data.total
                this.scroll.noData = res.data.total == 0
            })
        },
        fastDateChange() {
            this.onRefresh()
        },
        // 重头第一页刷新列表
        onRefresh() {
            this.scroll.loading = true
            this.scroll.max = false
            this.scroll.noData = false
            this.scroll.page = 1
            this.list = []
            this.getList(() => {
                this.scroll.loading = false;
                uni.stopPullDownRefresh()
            })
        },
        // 滚动到底部加载
        onInfinite() {
            if(this.scroll.loading || this.scroll.max) return
            this.scroll.loading = true
            this.scroll.page += 1
            this.getList(() => {
                this.scroll.loading = false
            })
        },
    }
}
</script>

<style lang="less" scoped>
.header{
    position: sticky;
    top: 0;
}
.search{
    width: 100%;
    // height: 80px;
    background: #fff;
    padding: 15rpx 20rpx;
    display: flex;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 100;
    .input{
        width: 100%;
        display: flex;
        background: #eee;
        border-radius: 10rpx;
        height: 60rpx;
        padding: 0 0 0 20rpx;
        align-items: center;
        i{
            color: #999;
        }
        input{
            flex: 1;
            height: 100%;
            padding-left: 20rpx;
            font-size: 28rpx;
        }
        .clear{
            width: 60rpx;
            height: 60rpx;
            .align(center);
        }
    }
}

.list{
    padding-top: 20rpx;
    .item{
        width: 100%;
        background: #fff;
        display: flex;
        align-items: center;
        padding: 20rpx 30rpx;
        .img{
            width: 120rpx;
            height: 120rpx;
            flex-shrink: 0;
            margin-right: 20rpx;
            image{
                width: 100%;
                height: 100%;
            }
        }
        .detail {
            height: 120rpx;
            flex: 1;
            display: flex;
            flex-direction: column;
            p{
                font-size: 28rpx;
                color: #999;
                em{
                    font-weight: bold;
                    color: #000;
                    margin: 0 10rpx;
                }
            }
            span{
                color: #999;
                font-size: 26rpx;
                margin-top: 10rpx;
            }
        }
    }
}
</style>